<template>
  <div
    class="demo-infinite-container"
    v-infinite-scroll="handleInfiniteOnLoad">
    <div class="app-list">
      <!-- 编辑数据 -->
      <layout-create-form
        ref="layoutCreateForm"
        :layoutTypeOptions="layoutTypeOptions"
        @ok="resetQuery"
      />
      <a-list
        ref="list"
        :grid="{ gutter: 16, column: 4 }"
        :data-source="list">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card :hoverable="true">
            <template slot="actions" class="ant-card-actions">
              <a-tooltip
                slot="title"
                placement="top"
                title="查看"
                @click="previewImg(item.layoutImages)">
                <a-icon type="eye" />
              </a-tooltip>
              <a-tooltip slot="title" placement="top" title="编辑" @click="$refs.layoutCreateForm.handleUpdate(item)">
                <a-icon type="form" />
              </a-tooltip>
              <a-tooltip slot="title" placement="top" title="删除">
                <a-icon type="delete" />
              </a-tooltip>
            </template>
            <a-card-meta>
              <a-tooltip slot="title" placement="top" title="布局名称">
                {{ item.layoutName }}
              </a-tooltip>
              <a-avatar
                slot="avatar"
                :src="item.layoutImages"
              />
              <div slot="description" class="ant-card-meta-text">
                <ellipsis :length="100">{{ item.description }}</ellipsis>
              </div>
            </a-card-meta>
            <a-divider/>
            <a-card-meta>
              <div slot="description" class="meta-cardInfo" style="text-align: center">
                <a-row :gutter="24">
                  <a-col :lg="8" :sm="24" style="text-align: center">
                    <a-tooltip placement="top" title="布局类型">
                      <a-icon type="tags" /> <b>&nbsp;&nbsp;{{ layoutTypeFormat(item.layoutType) }}</b>
                    </a-tooltip>
                  </a-col>
                  <a-col :lg="8" :sm="24">
                    <a-tooltip placement="top" title="建筑面积">
                      <a-icon type="bank"/> <b>&nbsp;&nbsp;{{ item.buildingArea }} ㎡</b>
                    </a-tooltip>
                  </a-col>
                  <a-col :lg="8" :sm="24">
                    <a-tooltip placement="top" title="装修费用">
                      <a-icon type="dollar"/> <b>&nbsp;&nbsp;{{ item.decorateFee }} 元</b>
                    </a-tooltip>
                  </a-col>
                </a-row>
              </div>
            </a-card-meta>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import { listCaseLayout } from '@/api/instance/caseLayout'
import { Ellipsis } from '@/components'
import LayoutCreateForm from './LayoutCreateForm'
import infiniteScroll from 'vue-infinite-scroll'

export default {
  name: 'ViewLayoutPane',
  props: {
    caseId: {
      type: Number,
      required: true
    },
    layoutType: {
      type: String,
      required: true
    },
    layoutTypeOptions: {
      type: Array,
      required: true
    }
  },
  components: {
    LayoutCreateForm,
    Ellipsis
  },
  directives: { infiniteScroll },
  data () {
    return {
      busy: false,
      // 是否加载
      loading: false,
      // 数据集合
      list: [],
      // 数据总量
      total: 0,
      // 分页参数
      pageSizeOptions: ['12', '24', '36', '48'],
      // 查询参数
      queryParam: {
        caseId: undefined,
        layoutType: undefined,
        pageNum: 1,
        pageSize: 16
      }
    }
  },
  filters: {},
  created () {
    this.queryParam.caseId = this.caseId
    if (this.layoutType !== '0') {
      this.queryParam.layoutType = this.layoutType
    }
    this.getList()
  },
  mounted () {

  },
  watch: {

  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.list = []
      this.total = 0
      this.queryParam = {
        caseId: this.caseId,
        layoutType: this.layoutType !== '0' ? this.layoutType : undefined,
        pageNum: 1,
        pageSize: 16
      }
      this.getList()
    },
    /** 滚动出发加载 */
    handleInfiniteOnLoad () {
      if (this.total === this.list.length) {
        this.busy = true
      } else {
        this.queryParam.pageNum = this.queryParam.pageNum + 1
        this.getList()
      }
    },
    /** 案例布局 */
    getList () {
      this.loading = true
      listCaseLayout(this.queryParam).then(response => {
        this.list = this.list.concat(response.rows)
        this.total = response.total
        this.loading = false
      }
     )
    },
    /** 布局类型字典翻译 */
    layoutTypeFormat (val) {
      return this.selectDictLabel(this.layoutTypeOptions, val)
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onShowSizeChange (current, pageSize) {
      console.log(pageSize)
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.layoutId)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 图片预览 */
    previewImg (url) {
      this.$hevueImgPreview(url)
    }
  }
}
</script>

<style scoped>
.app-list {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ant-card-meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  height: 60px;
}

.demo-infinite-container {
  border-radius: 4px;
  overflow: auto;
  padding: 24px 24px;
}
</style>
